<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>生产管理系统</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script src="../../js/lib/mui.min.js"></script>
		<link href="../../css/iconfont.css" rel="stylesheet">
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<script src="../../js/lib/jquery-2.1.1.min.js"></script>
		<script src="../../js/config.js"></script>
		<script src="../js/MainPage.js"></script>
		<style>
			:root {
				--primary-color: #1890ff;
				--secondary-color: #2f4056;
				--accent-color: #13c2c2;
				--light-bg: #f0f2f5;
				--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
				--border-radius: 8px;
			}

			html,
			body {
				background-color: var(--light-bg);
				height: 100%;
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
			}

			.mui-bar {
				background-color: var(--secondary-color);
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
				height: 46px;
				line-height: 56px;
			}

			.header-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 0 15px;
			}

			.user-info {
				display: flex;
				align-items: center;
				color: white;
			}

			.user-info .mui-icon {
				font-size: 24px;
				color: rgba(255, 255, 255, 0.85);
				margin-right: 8px;
			}

			.user-name {
				font-size: 16px;
				color: rgba(255, 255, 255, 0.9);
			}

			.mui-content {
				padding: 16px;
				background-color: var(--light-bg);
			}

			.welcome-banner {
				background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
				color: white;
				padding: 16px;
				border-radius: var(--border-radius);
				margin-bottom: 20px;
				margin-top: 20px;
				text-align: center;
				box-shadow: var(--card-shadow);
			}

			.welcome-text {
				font-size: 18px;
				font-weight: 500;
				margin-bottom: 4px;
			}

			.user-id {
				font-size: 14px;
				opacity: 0.9;
			}

			.grid-container {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 16px;
				margin-bottom: 24px;
			}

			.grid-item {
				background: white;
				border-radius: var(--border-radius);
				padding: 12px 8px;
				text-align: center;
				box-shadow: var(--card-shadow);
				transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
				border: none;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 100px;
			}

			.grid-item:active {
				transform: scale(0.98);
			}

			.grid-item .iconfont {
				font-size: 36px;
				margin-bottom: 12px;
				color: var(--primary-color);
			}

			.grid-item .item-title {
				font-size: 16px;
				color: var(--secondary-color);
				font-weight: 500;
			}

			.grid-item {
				transform: scale(0.75);
				/* 缩小到85% */
				transform-origin: center;
				/* 确保从中心缩放 */
			}

			.module-title {
				font-size: 18px;
				font-weight: 600;
				color: var(--secondary-color);
				margin-bottom: 12px;
				padding-left: 8px;
				border-left: 4px solid var(--primary-color);
			}

			@media (min-width: 480px) {
				.grid-container {
					grid-template-columns: repeat(3, 1fr);
				}
			}

			/* 调整间距 */
			.grid-container {
				column-gap: 5px;
				/* 只调整列间距 */
				row-gap: 5px;
				/* 行间距保持不变 */
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<div class="header-content">
				<div class="user-info">
					<i class="mui-icon mui-icon-contact"></i>
					<span class="user-name" id="user-id-display"></span>
				</div>
			</div>
		</header>

		<div class="mui-content">
			<div class="welcome-banner">
				<div class="welcome-text">Production Management System</div>
				<div class="user-id">Operator: <span id="badge"></span></div>
			</div>

			<!-- 现场模组 -->
			<!-- <div class="module-title">仓库模组</div>
			<div class="grid-container">
				<div class="grid-item" onclick="MfgWorkOrderInfo(4)">
					<span class="iconfont icon-ruku"></span>
					<div class="item-title">入库上架</div>
				</div>
				<div class="grid-item" onclick="MfgWorkOrderInfo(5)">
					<span class="iconfont icon-chuku"></span>
					<div class="item-title">领料下架</div>
				</div>
			</div> -->

			<!-- 现场模组 -->
			<!-- 			<div class="module-title">现场模组</div>
			<div class="grid-container">
				<div class="grid-item" onclick="MfgWorkOrderInfo(0)">
					<span class="iconfont icon-SMT-shangliao"></span>
					<div class="item-title">贴片上料</div>
				</div>
				<div class="grid-item" onclick="MfgWorkOrderInfo(1)">
					<span class="iconfont icon-QCtu"></span>
					<div class="item-title">QC检料</div>
				</div>
				<div class="grid-item" onclick="MfgWorkOrderInfo(2)">
					<span class="iconfont icon-huanliao"></span>
					<div class="item-title">物料接料</div>
				</div>
				<div class="grid-item" onclick="MfgWorkOrderInfo(3)">
					<span class="iconfont icon-SMT-xialiao"></span>
					<div class="item-title">物料下料</div>
				</div>
			</div> -->
		</div>

		<script>
			// 设置用户ID显示
			document.getElementById("badge").textContent = UserName;
			// document.getElementById("user-id-display").textContent = UserName;

			mui.init({
				swipeBack: true, //启用右滑关闭
				beforeback: function() {
					return true;
				}
			});
		</script>
	</body>
</html>